<template>
  <grimm-page type="button-view" title="image-preview">
    <template slot="content">
      <grimm-button @click="basicsTrigger">
        基础组件
      </grimm-button>
      <grimm-button @click="loopTrigger">
        循环组件
      </grimm-button>
      <grimm-button @click="autoPlayTrigger">
        自动播放
      </grimm-button>
      <grimm-button @click="startTrigger" style="margin-top:10px;">
        设置初始页
      </grimm-button>
      <grimm-image-preview
        :images="imagesArr"
        :show-index="showIndex"
        :startPosition="startPosition"
        :loop="loop"
        :autoPlay="autoPlay"
        :interval="interval"
        @close="triggerStatus"
        @change="change"
        v-if="visable"
      />
    </template>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  data() {
    return {
      visable: false,
      showIndex: true,
      startPosition: 0,
      loop: false,
      autoPlay: false,
      interval: 3000,
      imagesArr: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg',
      ],
    };
  },
  components: {
    GrimmPage,
  },
  methods: {
    basicsTrigger() {
      Object.assign(this.$data, this.$options.data());
      this.triggerStatus();
    },
    triggerStatus() {
      this.visable = !this.visable;
    },
    loopTrigger() {
      Object.assign(this.$data, this.$options.data());
      this.loop = true;
      this.triggerStatus();
    },
    autoPlayTrigger() {
      Object.assign(this.$data, this.$options.data());
      this.autoPlay = true;
      this.triggerStatus();
    },
    startTrigger() {
      Object.assign(this.$data, this.$options.data());
      this.startPosition = 2;
      this.triggerStatus();
    },
    change(index) {
      console.log(index)
    },
  }
};
</script>
